<template>
  <div class="category">
    <nav-bar text-color="#fff" bg-color="#ff8198">
      <div slot="center">商品分类</div>
    </nav-bar>
    <div class="content">
      <tab-control class="topTabControl" :current-type="currentType" :titles="tabTitles"
                   @tabControlItemClick="tabControlItemClick"
                   v-show="showTopTab"/>
      <side-menu class="side-menu" :category-list="categoryList" :current-key="currentKey"
                 @categoryTitleClick="categoryTitleClick"/>
      <b-scroll ref="bScroll" class="subcategoryContent" :b-scroll-object="bScrollObject" @scrollMonitor="scrollMonitor"
                @pullingUp="loadMore">
        <goods-view :subcategory-list="subcategoryList"/>
        <tab-control ref="tabControl" :current-type="currentType" :titles="tabTitles"
                     @tabControlItemClick="tabControlItemClick"/>
        <goods-list :goods-list="showGoodsList" img-load-fun-name="categoryImgLoad"/>
      </b-scroll>
    </div>
  </div>
</template>

<script>
import NavBar from "@/components/component/navBar/NavBar";
import BScroll from "@/components/component/bScroll/BScroll";
import GoodsView from "@/components/component/goods/GoodsView";
import TabControl from "@/components/content/tabControl/TabControl";
import GoodsList from "@/components/content/goods/GoodsList";

import SideMenu from "./childComponent/SideMenu";

import {BScrollClass} from "@/common/constant";
import * as request from "@/network/category";
import * as Constant from "@/common/constant";


export default {
  name: "category",
  components: {
    NavBar,
    SideMenu,
    BScroll,
    GoodsView,
    TabControl,
    GoodsList
  },
  data() {
    return {
      bScrollObject: new BScrollClass().setProbeType(3).setImgLoadFunName("categoryImgLoad"),
      categoryList: [],
      currentKey: null,
      currentMiniWallkey: null,
      subcategoryList: [],
      currentType: Constant.POP,
      tabTitles: [
        {type: Constant.POP, title: '综合'},
        {type: Constant.NEW, title: '新品'},
        {type: Constant.SELL, title: '销量'}
      ],
      goodsList: {
        'pop': {'page': 1, 'list': []},
        'new': {'page': 1, 'list': []},
        'sell': {'page': 1, 'list': []}
      },
      showTopTab: false,
    }
  },
  created() {
    this.__getCategory();
  },
  activated() {
    this.$refs.bScroll.refresh();
  },
  computed: {
    showGoodsList() {
      return this.goodsList[this.currentType].list;
    }
  },
  methods: {
    __getCategory() {
      request.getCategory().then(res => {
        this.categoryList = res.data.list;
        if (res.data.list.length) {
          this.currentKey = res.data.list[0].maitKey;
          this.currentMiniWallkey = res.data.list[0].miniWallkey;
          this.__getSubcategory(this.currentKey);
        }
      })
    },
    __getSubcategory(maitKey) {
      request.getSubcategory(maitKey).then(res => {
        this.subcategoryList = res.data.list;
        this.__getCategoryDetail(Constant.POP)
      })
    },
    __getCategoryDetail(type, callback) {
      request.getCategoryDetail(this.currentMiniWallkey, type).then(res => {
        this.goodsList[type].list.push(...res.data);
        this.goodsList[type].page++;
        if (typeof callback === 'function') {
          callback();
        }
      })
    },
    categoryTitleClick(maitKey) {
      this.currentKey = maitKey;
      this.__getSubcategory(maitKey);
      this.$refs.bScroll.scrollTo();
    },
    tabControlItemClick(type) {
      this.currentType = type;
      this.__getCategoryDetail(this.currentType);
      this.$refs.bScroll.scrollToElement(this.$refs.tabControl.$el);
    },
    scrollMonitor(position) {
      this.showTopTab = (Math.abs(position.y) > Math.abs(this.$refs.tabControl.$el.offsetTop));
    },
    loadMore(callback) {
      this.__getCategoryDetail(this.currentType, callback);
    }
  }
}
</script>

<style scoped>
.category {
  height: 100vh;
}

.category .content {
  height: calc(100% - 93px);
  display: flex;
}

.topTabControl {
  position: fixed;
  top: 44px;
  left: 100px;
  right: 0;
  z-index: 10;
}

.category .content .side-menu {
  width: 100px;
}

.category .content .subcategoryContent {
  flex: 1;
}
</style>